import { Icon } from "@antmjs/vantui"
import { View, Text } from "@tarojs/components"
import Taro, { useRouter } from "@tarojs/taro"
import { useEffect, useState } from "react"
import WowButton from '../../components/WowButton'

import "./index.less"

const PublishSuccess = () => {

  const [pageState, setPageState] = useState('success')

  const router = useRouter()

  const copyCode = async code => {
    const res = await Taro.setClipboardData({
      data: code
    })
    console.log(res)
  }

  const goHome = () => {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }

  const goPulishTask = () => {
    Taro.navigateTo({
      url: '/task/publish-task/index'
    })
  }

  useEffect(() => {
    setPageState(router.params.pageState)
  }, [router])

  return (
    <View className='publish-success-wrapper'>
      {
        pageState === 'success' ?
          (
            <View className='info-wrapper'>
              <View className='success-icon'>
                <Icon name='success' size={120} color='#fff' />
              </View>
              <Text className='text success-text'>房间申请成功</Text>
              <Text className='text current-floor'>当前选择大秘境15-19层,扣除70益豆</Text>
              <Text className='text'>房间码</Text>
              <View className='code-box'>123456789</View>
              <Text className='text'>请将当前房间码复制后发送给车队其他人!</Text>
              <Text className='text'>有效期24小时</Text>
              <View className='button-group'>
                <WowButton onClick={goHome} className='success-btn'>返回</WowButton>
                <WowButton onClick={() => copyCode('123456789')} className='success-btn'>复制</WowButton>
              </View>
              <View className='order-box'>
                <View className='order-num'>申请单号: 202208291122</View>
                <View className='order-num'>申请日期: 2022-08-29 18:20</View>
                <Icon onClick={() => copyCode(`申请单号: 202208291122\r\n申请日期: 2022-08-29 18:20`)} className='copy-icon' name='description' />
              </View>
            </View>
          ) :
          (
            <View className='info-wrapper'>
              <View className='success-icon'>
                <Icon name='cross' size={120} color='#fff' />
              </View>
              <Text className='text success-text'>房间申请失败</Text>
              <Text className='text current-floor'>当前选择大秘境15-19层,你的益豆不足70</Text>
              <View className='error-btn'>
                <WowButton onClick={goPulishTask}>返回</WowButton>
              </View>
            </View>
          )
      }
    </View>
  )
}

export default PublishSuccess